<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" /> 年龄：<input
        type="text"
        class="age"
        name="age"
      />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" /> 就业城市：<select
        name="city"
        class="city"
      >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>添加时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
      </tbody>
    </table>
    <script>
      // 获取表单元素
      const form = document.querySelector(".info");
      const info = document.querySelectorAll(".info [name]");
      const tbody = document.querySelector("tbody");
      // 数据
      // let dataList = [];
      // 获取本地存储数据
      let dataList = JSON.parse(localStorage.getItem("dataList")) || [];
      // 渲染表格
      renderTable();
      console.log(dataList);
      // 获取录入按钮
      const add = form.querySelector(".add");
      // 录入按钮添加事件
      // add.addEventListener('click', function (e) {
      //   e.preventDefault();
      //   // 判断信息是否为空
      //   for (let i = 0; i < info.length; i++) {
      //     if (info[i].value === '') {
      //       alert('请填写完整信息');
      //       return;
      //     }
      //   }

      //   // 将信息添加到数据中
      //   dataList.push({
      //     id: dataList.length + 1,
      //     uname: info[0].value,
      //     age: info[1].value,
      //     gender: info[2].value,
      //     salary: info[3].value,
      //     city: info[4].value,
      //     addTime: new Date().toLocaleString()
      //   })
      //   // 存储数据
      //   localStorage.setItem('dataList', JSON.stringify(dataList));
      //   // 重置表单
      //   form.reset();
      //   // 渲染表格
      //   renderTable();
      // })

      // form表单添加事件
      form.addEventListener("submit", function (e) {
        e.preventDefault();
        // 获取表单数据;
        for (let i = 0; i < info.length; i++) {
          if (info[i].value === "") {
            alert("请填写完整信息");
            return;
          }
        }

        // 将信息添加到数据中
        dataList.push({
          id: dataList[dataList.length - 1]?.id + 1 || 1,
          uname: info[0].value,
          age: info[1].value,
          gender: info[2].value,
          salary: info[3].value,
          city: info[4].value,
          addTime: new Date().toLocaleString(),
        });
        // 存储数据
        localStorage.setItem("dataList", JSON.stringify(dataList));
        // 重置表单
        this.reset();
        // 渲染表格
        renderTable();
      });
      // 渲染表格
      function renderTable() {
        // 清空表格
        tbody.innerHTML = "";
        // 遍历数据
        // dataList.forEach(item => {
        //   tbody.innerHTML += `
        //   <tr>
        //     <td>${item.id}</td>
        //     <td>${item.uname}</td>
        //     <td>${item.age}</td>
        //     <td>${item.gender}</td>
        //     <td>${item.salary}</td>
        //     <td>${item.city}</td>
        //     <td>
        //       <a href="javascript:" data-id="${item.id}">删除</a>
        //     </td>
        //   </tr>
        //   `
        // })

        // 使用map+join方法
        const trs = dataList
          .map((item) => {
            return `
        <tr>
          <td>${item.id}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>${item.addTime}</td>
          <td>
            <a href="javascript:" data-id="${item.id}">删除</a>
          </td>
        </tr>
        `;
          })
          .join("");
        tbody.innerHTML = trs;
      }
      // 删除
      tbody.addEventListener("click", function (e) {
        if (e.target.tagName === "A") {
          const id = +e.target.dataset.id;
          // 删除数据
          dataList = dataList.filter((item) => item.id !== id);
          // 存储数据
          localStorage.setItem("dataList", JSON.stringify(dataList));
          // 渲染表格
          renderTable();
        }
      });
    </script>
  </body>
</html>
